<template>
  <div class="detail-layout">
    <el-tabs v-model="activeTabName" tab-position="top" type="border-card">
      <el-tab-pane label="应用标准页" name="rule">
        <process-specification-standard
          v-if="activeTabName === 'rule'"
          :model="model.rule.formData"
          :data="model.rule.tableData"
        />
      </el-tab-pane>
      <el-tab-pane label="工序目录页" name="processList">
        <process-list
          v-if="activeTabName === 'processList'"
          :model="model.process.formData"
          :data="model.process.tableData"
          :change="changeTabHandler"
        />
      </el-tab-pane>
      <el-tab-pane label="工序内容页" name="processContent">
        <process-content
          v-if="activeTabName === 'processContent'"
          :row="clickTableRow"
          :tree="model.processContent.processTree"
          :model="model.processContent.formData"
          :data="model.processContent.tableData"
        />
      </el-tab-pane>
      <el-tab-pane label="更改记录" name="record">更改记录</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import processSpecificationStandard from "./components/ProcessSpecificationStandard.vue";
import processList from "./components/ProcessList.vue";
import processContent from "./components/ProcessContent.vue";
import { getCraftRuleDetails } from "@/api";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import type { TabType } from "@/typings";

interface Model {
  rule: {
    formData: Object;
    tableData: any[];
  };
  process: {
    formData: Object;
    tableData: any[];
  };
  processContent: {
    formData: Object;
    processTree: any[]; // 工序列表
    tableData: any[]; // 默认内容页的数据
  };
  pivotal: {
    formData: Object;
    tableData: any[];
  };
  guide: {
    formData: Object;
    tableData: any[];
  };
  record: {
    formData: Object;
    tableData: any[];
  };
}

defineOptions({
  name: "CraftRuleDetails"
});

const clickTableRow = ref<any>();
const activeTabName = ref<string>("rule");
const route = useRoute();
const model = ref<Model>({
  rule: {
    formData: {},
    tableData: []
  },
  process: {
    formData: {},
    tableData: []
  },
  processContent: {
    formData: {},
    processTree: [],
    tableData: []
  },
  pivotal: {
    formData: {},
    tableData: []
  },
  guide: {
    formData: {},
    tableData: []
  },
  record: {
    formData: {},
    tableData: []
  }
});
onMounted(() => {
  init();
});

const init = async () => {
  try {
    const result = await getCraftRuleDetails(route.params.id as string);
    if (result.code === 200) {
      model.value = result.data;
      return;
    }
    ElMessage.error(result.message);
  } catch (error) {
    console.log(error);
    ElMessage.error("加载数据失败，请稍后再试");
  }
};

const changeTabHandler = (val: TabType, row: any) => {
  activeTabName.value = val;
  clickTableRow.value = row;
};
</script>

<style scoped lang="scss">
.detail-layout {
  width: 100%;
  height: 100%;
  :deep(.el-tabs) {
    height: 100%;
    width: 100%;
    .el-tabs__content {
      height: calc(100% - 39px);
      .el-tab-pane {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
